import React, { useState } from 'react';
import { Button } from 'antd';
import Img from '../../../assets/star.jpg';
import LoadingImg from '../../../assets/loading.gif';
const Index = () => {
  const [show, setShow] = useState<boolean>(false);
  //
  var MyImage = function (imgNode: any) {
    return {
      setSrc: function (src: any) {
        imgNode.src = src;
      },
    };
  };

  var ProxyImage = function (imgNode: any) {
    var img = new Image();
    img.onload = function () {
      //@ts-ignore
      MyImage(imgNode).setSrc(this.src);
    };
    return {
      setSrc: function (src: any) {
        MyImage(imgNode).setSrc(LoadingImg);
        img.src = src;
      },
    };
  };

  const handleLoad = () => {
    setShow(!show);
    const iNode = document.getElementById('img');
    ProxyImage(iNode).setSrc(Img);
  };

  return (
    <div>
      <h3>虚拟代理</h3>
      <p>
        虚代理即Virtual
        Proxy，它让调用者先持有一个代理对象，但真正的对象尚未创建。如果没有必要，这个真正的对象是不会被创建的，直到客户端需要真的必须调用时，才创建真正的对象。
      </p>
      <p>我们用虚拟代理来实现一个图片的预加载</p>
      <Button style={{ margin: '20 0' }} onClick={handleLoad}>
        {show ? '隐藏' : '加载'}
      </Button>
      <img
        style={{ height: 400, display: show ? 'block' : 'none' }}
        id="img"
        src=""
      />
    </div>
  );
};
export default Index;
